<html>
<head>
    <meta charset="UTF-8">
    <title>展示垃圾分类信息</title>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript">
        function getDataByAxios() {
            axios.post('/garbage/SortServlet?op=getSort').then(function (response) {
                document.getElementById("data").innerHTML = response.data;
                // alert(response.data);
            }).catch(function (error) {
                console.log(error);
            });
        }
    </script>
    <style>
        .button{
            outline: none;
            margin-left: auto;
            color: #c9c9c9;
            cursor: pointer;
            width: 140px;
            height: 40px;
            font-size: 20px;
            border-radius: 10px;
            border: 0;
            background-image: linear-gradient(to right,#e8198b,#0eb4dd);
        }
        .button:hover{
            outline: none;
            margin-left: auto;
            color: #F0FFFF;
            width: 140px;
            height: 40px;
            border: 0;
            border-radius: 20px;
            background-image: linear-gradient(to right,#e8198b,#0eb4dd);
            transition: all 0.5s linear;
        }
        .data{
            font-size: 20px;
            color: royalblue;
        }
    </style>
</head>
<body style="background-color: lightyellow">
<div id="login" align="center">
    <input class="button" type="button" onclick="getDataByAxios()" value="展示DB数据"/>
</div>
<br>
<br>
<div class="data" id="data" align="center">
</div>
</body>
</html>
